<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vocabulary Website</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        /* Floating button and settings panel styles */
        .play-controls-container {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: #409EFF;
            padding: 10px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        .play-controls {
            width: 200px;
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            color: #000;
            position: fixed;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            display: none;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }
        .play-controls.show {
            display: flex;
        }
    </style>
</head>

<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="test">单词测试</el-menu-item>
        <el-menu-item index="error">错词记录</el-menu-item>
    </el-menu>

    <!-- 首页内容 -->
    <div v-if="currentPage === 'home'">
        <div class="app-container" style="display: flex;">
            <!-- 章节侧边栏 -->
            <div class="sidebar" style="width: 200px; border-right: 1px solid #ddd; padding-right: 10px;">
                <el-menu
                        class="el-menu-vertical-demo"
                        @select="handleChapterSelect"
                        unique-opened
                >
                    <el-submenu index="3">
                        <template slot="title">第3章</template>
                        <el-menu-item v-for="chapter in chapters['3']" :key="chapter" :index="chapter">
                            {{ chapter }}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">第4章</template>
                        <el-menu-item v-for="chapter in chapters['4']" :key="chapter" :index="chapter">
                            {{ chapter }}
                        </el-menu-item>
                    </el-submenu>
                    <!-- 其他章节组按照相同的方式添加 -->
                    <el-submenu index="5">
                        <template slot="title">第5章</template>
                        <el-menu-item v-for="chapter in chapters['5']" :key="chapter" :index="chapter">
                            {{ chapter }}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="8">
                        <template slot="title">第8章</template>
                        <el-menu-item v-for="chapter in chapters['8']" :key="chapter" :index="chapter">
                            {{ chapter }}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="11">
                        <template slot="title">第11章</template>
                        <el-menu-item v-for="chapter in chapters['11']" :key="chapter" :index="chapter">
                            {{ chapter }}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>

            <!-- 单词列表 -->
            <div class="box" style="flex: 1; padding-left: 10px;">
                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="word" label="单词" align="center"></el-table-column>
                    <el-table-column prop="usPhonetic" label="美式音标" align="center">
                        <template slot-scope="scope">
                        <span @click="playAudio(scope.row.usVoice)" style="cursor: pointer; color: #409EFF;">
                            {{ scope.row.usPhonetic }}
                        </span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="ukPhonetic" label="英式音标" align="center">
                        <template slot-scope="scope">
                        <span @click="playAudio(scope.row.ukVoice)" style="cursor: pointer; color: #409EFF;">
                            {{ scope.row.ukPhonetic }}
                        </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wangLuMeaning" label="中文意思" align="center"></el-table-column>
                    <el-table-column prop="remark" label="笔记" align="center"></el-table-column>
                </el-table>

                <!-- 分页工具条 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.totalItems">
                </el-pagination>
            </div>

            <!-- Floating play controls button -->
            <div class="play-controls-container" @click="toggleSidebar">
                <i class="el-icon-arrow-right" v-if="!sidebarExpanded"></i>
                <i class="el-icon-arrow-left" v-else></i>
            </div>

            <!-- Floating play controls sidebar -->
            <div class="play-controls" :class="{ show: sidebarExpanded }">
                <el-radio-group v-model="selectedPronunciation" size="small">
                    <el-radio-button label="usVoice">美音</el-radio-button>
                    <el-radio-button label="ukVoice">英音</el-radio-button>
                </el-radio-group>
                <el-slider v-model="playbackRate" :min="0.5" :max="2" :step="0.1" show-tooltip></el-slider>
                <el-input-number v-model="playCount" :min="1" :max="5" label="播放次数" size="small" style="margin-top: 10px;"></el-input-number>
                <el-button type="primary" @click="startPlaying">播放</el-button>
                <el-button type="warning" @click="pausePlaying">暂停</el-button>
                <el-button type="success" @click="resumePlaying">继续</el-button>
            </div>
        </div>
    </div>
</div>

<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            currentPage: 'home',
            allChapters: ['3.2', '3.3.1', '3.3.2', '3.3.3', '3.3.4', '3.3.5', '3.3.6', '3.3.7', '3.3.8', '3.3.9','4.2', '4.3.1', '4.3.2', '4.3.3', '4.4','5.2', '5.3.1', '5.3.2', '5.3.3', '5.3.4', '5.3.5', '5.3.6', '5.3.7', '5.3.8', '5.3.9', '5.3.10', '5.3.11', '5.3.12','8.2', '8.3.1', '8.3.2', '8.3.3', '8.3.4', '8.3.5', '8.4.1', '8.4.2', '8.4.3', '8.5', '8.6.1', '8.6.2', '8.6.3', '8.7.1', '8.7.2', '8.7.3', '8.8','11.1', '11.2', '11.3', '11.4'],
            chapters: {
                '3': ['3.2', '3.3.1', '3.3.2', '3.3.3', '3.3.4', '3.3.5', '3.3.6', '3.3.7', '3.3.8', '3.3.9'],
                '4': ['4.2', '4.3.1', '4.3.2', '4.3.3', '4.4'],
                '5': ['5.2', '5.3.1', '5.3.2', '5.3.3', '5.3.4', '5.3.5', '5.3.6', '5.3.7', '5.3.8', '5.3.9', '5.3.10', '5.3.11', '5.3.12'],
                '8': ['8.2', '8.3.1', '8.3.2', '8.3.3', '8.3.4', '8.3.5', '8.4.1', '8.4.2', '8.4.3', '8.5', '8.6.1', '8.6.2', '8.6.3', '8.7.1', '8.7.2', '8.7.3', '8.8'],
                '11': ['11.1', '11.2', '11.3', '11.4']
            },
            selectedChapter: '',
            pagination: {
                currentPage: 1,
                pageSize: 50,
                totalItems: 0
            },
            dataList: [],
            selectedPronunciation: 'usVoice',
            playbackRate: 1.0,
            playCount: 1,
            audioQueue: [],
            currentAudio: null,
            sidebarExpanded: false
        },
        created() {
            this.getAll();
        },
        methods: {
            handleSelect(key) {
                this.currentPage = key;
                if (key === 'test') {
                    this.goToTestPage();
                }
                if (key === 'error') {
                    this.goToErrorWordPage();
                }
            },
            goToTestPage() {
                window.location.href = 'select-chapter.html';
            },
            goToErrorWordPage() {
                window.location.href = 'error-words.html';
            },
            handleChapterSelect(chapter) {
                this.selectedChapter = chapter;
                this.pagination.currentPage = 1;
                this.getAll();
            },
            playAudio(audioUrl) {
                if (audioUrl) {
                    const audio = new Audio(audioUrl);
                    audio.play().catch(error => {
                        console.error("音频播放失败: ", error);
                        this.$message.error("音频播放失败");
                    });
                } else {
                    this.$message.warning("没有找到音频文件");
                }
            },
            handlePageChange(page) {
                this.pagination.currentPage = page;
                this.getAll();
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.pagination.currentPage = 1;
                this.getAll();
            },
            getAll() {
                const { currentPage, pageSize } = this.pagination;
                const chapter = this.selectedChapter ? `&chapter=${encodeURIComponent(this.selectedChapter)}` : '';
                axios.get(`/wanglu/pagequery?page=${currentPage}&size=${pageSize}${chapter}`)
                    .then((res) => {
                        this.dataList = res.data.data.data;
                        this.pagination.totalItems = res.data.data.total;
                    }).catch((error) => {
                    console.error("获取数据失败: ", error);
                });
            },
            startPlaying() {
                this.audioQueue = this.dataList.flatMap(word => Array(this.playCount).fill(word[this.selectedPronunciation])).filter(Boolean);
                this.playNextInQueue();
            },
            playNextInQueue() {
                if (this.audioQueue.length === 0) {
                    this.currentAudio = null;
                    return;
                }
                const audioUrl = this.audioQueue.shift();
                this.currentAudio = new Audio(audioUrl);
                this.currentAudio.playbackRate = this.playbackRate;
                this.currentAudio.addEventListener('ended', () => this.playNextInQueue());
                this.currentAudio.play();
            },
            pausePlaying() {
                if (this.currentAudio) {
                    this.currentAudio.pause();
                }
            },
            resumePlaying() {
                if (this.currentAudio) {
                    this.currentAudio.play();
                }
            },
            toggleSidebar() {
                this.sidebarExpanded = !this.sidebarExpanded;
            }
        }
    });
</script>
</body>
</html>